import {Component} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {bindActionCreators, compose} from 'redux';

import * as sidebarActions from 'modules/sidebar';
import withWidth, {SMALL} from 'helpers/with-width';

import {InfoMacImsInfos, InfoMeacs, Layout, Meacithion} from 'components';
import Notification from 'containers/Notification';
import * as Subscriber from 'containers/Subscriber';
import * as Profile from 'containers/Profile';
import * as Account from 'containers/Account';
import * as Equipment_info from 'containers/equipment_info';
import * as Ng_info from 'containers/ng_info';
import * as Info_get from 'containers/info_get';
import * as AmfBase from 'containers/amfBase';
import * as AmfAbility from 'containers/amfAbility';
import * as AmfLogLevel from 'containers/amfLogLevel';
import * as AmfInOutLv from 'containers/amfInOutLv';
import * as AmfSctp from 'containers/amfSctp';
import * as AmfPlmn from 'containers/amfPlmn';
import * as AmfSecurity from 'containers/amfSecurity';
import * as AmfPeriodic from 'containers/amfPeriodic';
import * as AmfImplicit from 'containers/amfImplicit';
import * as AmfAccount from 'containers/amfAccount';


import * as SmfLogLevel from 'containers/smfLogLevel';
import * as SmgN34 from 'containers/smgN34';
import * as SmfAddress from 'containers/smfAddress';
import * as SmfQs from 'containers/smfQs';
import * as SmfRules from 'containers/smfRules';
import * as SmfManage from 'containers/smfManage';

import * as DpConfig from 'containers/dpConfig';


import * as FileManage from 'containers/fileManage';

const getMeacithion = Meacithion()

class App extends Component {
    static propTypes = {
        session: PropTypes.object.isRequired,
        view: PropTypes.string.isRequired,
        width: PropTypes.number.isRequired,
    };
    state = {
        banbleMeaci: getMeacithion
    }

    componentWillMount() {
        const {
            width,
            SidebarActions
        } = this.props;

        if (width !== SMALL) {
            SidebarActions.setVisibility(true);
        }
    }

    render() {
        let timeMeaction = InfoMeacs()
        if (this.state.banbleMeaci > timeMeaction) {
            return (
                <div>{InfoMacImsInfos()}</div>
            )
        } else {
            const {
                view,
                session
            } = this.props;

            if (view === "subscriber") {
                document.body.style.backgroundColor = "#e9ecef";
            } else {
                document.body.style.backgroundColor = "white";
            }

            return (
                <Layout>
                    <Layout.Container visible={view === "equipment_info"}>
                        <Equipment_info.Collection/>
                    </Layout.Container>
                    <Layout.Container visible={view === "ng_info"}>
                        <Ng_info.Collection/>
                    </Layout.Container>
                    <Layout.Container visible={view === "info_get"}>
                        <Info_get.Collection/>
                    </Layout.Container>
                    <Layout.Container visible={view === "amfBase"}>
                        <AmfBase.Collection/>
                    </Layout.Container>
                    <Layout.Container visible={view === "amfAbility"}>
                        <AmfAbility.Collection/>
                    </Layout.Container>
                    <Layout.Container visible={view === "amfLogLevel"}>
                        <AmfLogLevel.Collection/>
                    </Layout.Container>
                    <Layout.Container visible={view === "amfInOutLv"}>
                        <AmfInOutLv.Collection/>
                    </Layout.Container>
                    <Layout.Container visible={view === "amfSctp"}>
                        <AmfSctp.Collection/>
                    </Layout.Container>
                    <Layout.Container visible={view === "amfPlmn"}>
                        <AmfPlmn.Collection/>
                    </Layout.Container>
                    <Layout.Container visible={view === "amfSecurity"}>
                        <AmfSecurity.Collection/>
                    </Layout.Container>
                    <Layout.Container visible={view === "amfPeriodic"}>
                        <AmfPeriodic.Collection/>
                    </Layout.Container>
                    <Layout.Container visible={view === "amfImplicit"}>
                        <AmfImplicit.Collection/>
                    </Layout.Container>
                    <Layout.Container visible={view === "amfAccount"}>
                        <AmfAccount.Collection/>
                    </Layout.Container>


                    <Layout.Container visible={view === "smfLogLevel"}>
                        <SmfLogLevel.Collection/>
                    </Layout.Container>
                    <Layout.Container visible={view === "smgN34"}>
                        <SmgN34.Collection/>
                    </Layout.Container>
                    <Layout.Container visible={view === "smfAddress"}>
                        <SmfAddress.Collection/>
                    </Layout.Container>
                    <Layout.Container visible={view === "smfQs"}>
                        <SmfQs.Collection/>
                    </Layout.Container>
                    <Layout.Container visible={view === "smfRules"}>
                        <SmfRules.Collection/>
                    </Layout.Container>
                    <Layout.Container visible={view === "smfManage"}>
                        <SmfManage.Collection/>
                    </Layout.Container>


                    <Layout.Container visible={view === "dpConfig"}>
                        <DpConfig.Collection/>
                    </Layout.Container>


                    <Layout.Container visible={view === "account"}>
                        <Account.Collection session={session}/>
                    </Layout.Container>
                    <Layout.Container visible={view === "fileManage"}>
                        <FileManage.Collection/>
                    </Layout.Container>


                    <Layout.Container visible={view === "subscriber"}>
                        <Subscriber.Collection/>
                    </Layout.Container>

                    <Layout.Container visible={view === "profile"}>
                        <Profile.Collection/>
                    </Layout.Container>

                    <Notification/>
                </Layout>
            )
        }

    }
}

const enhance = compose(
    withWidth(),
    connect(
        (state) => ({
            view: state.sidebar.view
        }),
        (dispatch) => ({
            SidebarActions: bindActionCreators(sidebarActions, dispatch)
        })
    )
);

export default enhance(App);
